<script setup>
import { computed } from 'vue'

// 接收props
const props = defineProps({
  list: Array,
})

// 修改任务状态功能
const emit = defineEmits(['changeDone', 'delTodo', 'checkAll'])
const changeDone = id => {
  // console.log(id)
  emit('changeDone', id)
}

// const delTodo = id => {
//   emit('delTodo', id)
// }

// 计算全选状态
const isCheckAll = computed({
  get: () => {
    return props.list.length > 0 && props.list.every(v => v.done)
  },
  set: bl => {
    emit('checkAll', bl)
  },
})
</script>

<template>
  <section class="main">
    <input
      v-model="isCheckAll"
      id="toggle-all"
      class="toggle-all"
      type="checkbox"
    />
    <label for="toggle-all">Mark all as complete</label>
    <ul class="todo-list">
      <li v-for="item in list" :key="item.id" :class="{ completed: item.done }">
        <div class="view">
          <input
            class="toggle"
            @click="changeDone(item.id)"
            type="checkbox"
            :checked="item.done"
          />
          <label>{{ item.content }}</label>
          <button @click="emit('delTodo', item.id)" class="destroy"></button>
        </div>
        <input class="edit" value="Create a TodoMVC template" />
      </li>
    </ul>
  </section>
</template>

<style lang="less" scoped></style>
